<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card style="margin-top: 10px">
      <!-- 设置表单内容都在一行显示 -->
      <el-form inline :model="userVO">
        <el-row>
          <el-col :span="6">
            <el-form-item label="部门">
              <el-select
                v-model="userVO.departmentId"
                placeholder="请选择"
                style="width: 100%"
                clearable
              >
                <el-option
                  v-for="item in departAndCountList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                  <span style="float: left">{{ item.name }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">
                    <el-tag size="mini">{{ item.deptCount }}</el-tag>
                  </span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="用户名">
              <el-input
                v-model="userVO.username"
                placeholder="请输入用户名"
                clearable
                min-width="100%"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="邮箱">
              <el-input
                v-model="userVO.email"
                placeholder="请输入邮箱"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input> </el-form-item
          ></el-col>
          <el-col :span="6">
            <el-radio-group v-model="userVO.sex">
              <el-radio>全部</el-radio>
              <el-radio :label="0">男</el-radio>
              <el-radio :label="1">女</el-radio>
            </el-radio-group>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="昵称">
              <el-input
                v-model="userVO.nickname"
                placeholder="请输入昵称"
                clearable
                min-width="100%"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-button icon="el-icon-search" type="primary" @click="search"
              >查询</el-button
            >
            <el-button icon="el-icon-refresh" type="error" @click="reset"
              >重置</el-button
            >
            <el-button icon="el-icon-plus" type="success" @click="addUser"
              >新增</el-button
            >
            <el-button
              icon="el-icon-download"
              type="warning"
              @click="exportUserExcel"
              >导出</el-button
            >
          </el-col>
        </el-row>
      </el-form>

      <!-- 表格开始 -->
      <!--表格内容显示区域-->
      <el-table :data="userList" border max-height="440" style="width: 100%">
        <el-table-column prop="id" label="#" width="50"> </el-table-column>
        <el-table-column prop="username" label="用户名" width="110">
        </el-table-column>
        <el-table-column prop="sex" label="性别" width="60">
          <!-- 如何获取循环的对象 useList  双重三元表达式 -->
          <template slot-scope="scope">
            {{ scope.row.sex == 0 ? "男" : scope.row.sex == 1 ? "女" : "保密" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="departmentName"
          sortable
          label="所属部门"
          width="180"
        >
        </el-table-column>
        <el-table-column sortable prop="birth" label="生日" width="180">
        </el-table-column>
        <el-table-column sortable prop="email" label="邮箱" width="180">
        </el-table-column>
        <el-table-column prop="phoneNumber" label="电话" width="150">
        </el-table-column>
        <el-table-column prop="status" label="是否禁用" width="100">
          <!-- scope表示当前表中的一行数据 -->
          <template slot-scope="scope">
            <!-- scope.row表示这一行的对象 -->
            <el-switch
              v-model="scope.row.status"
              active-color="#ff4949"
              inactive-color="#cccccc"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <el-button type="primary" size="mini" icon="el-icon-edit"></el-button>
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
          ></el-button>
          <el-button
            type="warning"
            size="mini"
            icon="el-icon-s-tools"
          ></el-button>
        </el-table-column>
      </el-table>
      <!-- 表格结束 -->

      <!-- 分页开始 -->
      <el-pagination
        style="margin-top: 10px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[6, 7, 8, 9]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <!-- 分页结束 -->

      <!-- 添加用户的组件,可以自动生成 -->
      <UserAdd
        :addOrUpdateVisible="addOrUpdateVisible"
        :departmentList="departAndCountList"
      ></UserAdd>
    </el-card>
  </div>
</template>

<script>
import UserAdd from "./UserAdd.vue";
import { getUserList, exportExcel } from "@/api/user";
import { getDepartment } from "@/api/department";
export default {
  data() {
    return {
      userVO: {
        departmentId: "",
        username: "",
        email: "",
        sex: "",
        nickname: "",
      },
      //当前页码
      current: 1,
      //每页条数
      size: 7,
      //总条数
      total: 100,
      departAndCountList: [],
      userList: [],
      // 控制新增编辑弹窗的显示与隐藏
      addOrUpdateVisible: false,
    };
  },
  methods: {
    //导出用户的表格
    async exportUserExcel() {
      exportExcel(this.userVO)
        .then((res) => {
          //这里没有返回数据,但是要在响应头中进行下载操作
          // 将二进制文件转化为可访问的url
          let url = window.URL.createObjectURL(new Blob([res]));
          var a = document.createElement("a");
          //在body后添加a连接
          document.body.appendChild(a);
          //指定a链接的路径
          a.href = url;
          //下载的名字
          a.download = "用户列表.xls";
          //模拟点击
          a.click();
          //删除路径
          window.URL.revokeObjectURL(url);
        })
        .catch((err) => {});
    },
    //添加用户
    addUser() {
      this.addOrUpdateVisible = true;
    },
    handleSizeChange(val) {
      this.size = val;
      this.getUsers();
    },
    handleCurrentChange(val) {
      this.current = val;
      this.getUsers();
    },
    async getUsers() {
      let result = await getUserList(this.current, this.size, this.userVO);
      this.userList = result.data.userPage.records;
      this.total = result.data.userPage.total;
    },
    async getDepartmentList() {
      let result = await getDepartment();
      this.departAndCountList = result.data.departments;
    },
    search() {
      this.getUsers();
    },
    reset() {
      this.userVO = {};
    },
  },
  created() {
    this.getUsers();

    this.getDepartmentList();
  },
  components: {
    UserAdd,
  },
};
</script>

<style lang="less" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>